<template>
  <div>
    <div style="text-align: center;margin-bottom: 20px;">
      <p>注：以下所有上传资料，格式支持图片格式JPG、PNG，且每个文件大小不超过{{imageSize}}M</p>
    </div>
    <a-form @submit="handleSubmit" style="width:60%;margin:0px auto;" :form="form">
      <a-row class="row-sty">
        <a-col :xs="{ span : 24 }" :sm="{ span:9 }" class="formGroupTitle">合作机构资料</a-col>
        <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:1 }"></a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="申请人身份证">
        <div class="clearfix" style="display:inline-block;">
          <a-upload
            v-decorator="['upload2',{rules: [{ required: true, message: '请上传身份证正/反面!' }]}]"
            action="/file/file/upload"
            listType="picture-card"
            :data="{to}"
            name="upfile"
            :headers="henderstoken"
            :fileList="fileList2"
            @preview="handlePreview2"
            @change="handleChange2"
          >
            <div v-if="fileList2.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">人像面</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible2" :footer="null" @cancel="handleCancel2">
            <img alt="example" style="width: 100%" :src="previewImage2" />
          </a-modal>
        </div>
        <div class="clearfix" style="display:inline-block;">
          <a-upload
            :data="{to}"
            name="upfile"
            :headers="henderstoken"
            action="/file/file/upload"
            listType="picture-card"
            :fileList="fileList3"
            @preview="handlePreview3"
            @change="handleChange3"
          >
            <div v-if="fileList3.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">国徽面</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible3" :footer="null" @cancel="handleCancel3">
            <img alt="example" style="width: 100%" :src="previewImage3" />
          </a-modal>
        </div>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="结算银行账户">
        <div class="clearfix" style="display:inline-block;">
          <a-upload
            v-decorator="['upload5',{rules: [{ required: true, message: '请上传银行卡正/反面!' }]}]"
            :data="{to}"
            name="upfile"
            :headers="henderstoken"
            action="/file/file/upload"
            listType="picture-card"
            :fileList="fileList5"
            @preview="handlePreview5"
            @change="handleChange5"
          >
            <div v-if="fileList5.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">银行卡正面</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible5" :footer="null" @cancel="handleCancel5">
            <img alt="example" style="width: 100%" :src="previewImage5" />
          </a-modal>
        </div>
         <p
                style="font-size: 12px;line-height: 30px;"
              >为了您的资金安全，请勿上传带有CVV安全码的照片</p>
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="申请人手持身份证和银行卡">
        <div class="clearfix" style="display:inline-block;">
          <a-upload
            v-decorator="['upload7',{rules: [{ required: true, message: '请上传申请人手持身份证和银行卡照片!' }]}]"
            action="/file/file/upload"
            listType="picture-card"
            :data="{to}"
            name="upfile"
            :headers="henderstoken"
            :fileList="fileList7"
            @preview="handlePreview7"
            @change="handleChange7"
          >
            <div v-if="fileList7.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">手持照片</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible7" :footer="null" @cancel="handleCancel7">
            <img alt="example" style="width: 100%" :src="previewImage7" />
          </a-modal>
        </div>
      </a-form-item>

      <!-- <a-form-item v-bind="formItemLayout" label="上传协议">
                <div class="clearfix" style="display: flex;flex-direction: column;">
                    <a-upload v-decorator="['upload10',{rules: [{ required: true, message: '请上传特约商户协议书!' }]}]"
                        name="upfile" :headers="henderstoken" action="/file/file/upload" listType="picture-card" :fileList="fileList10"
                        :data="{to}" @preview="handlePreview10" @change="handleChange10">
                        <div v-if="fileList10.length < 3">
                            <a-icon type="plus" />
                            <div class="ant-upload-text">特约商户协议书</div>
                        </div>
                    </a-upload>
                    <span>点击下载<a href="javascript:false;void(0);" @click='getDownload'>特约商户服务协议</a></span>
                    <a-modal :visible="previewVisible10" :footer="null" @cancel="handleCancel10">
                        <img alt="example" style="width: 100%" :src="previewImage10">
                    </a-modal>
                </div>
            </a-form-item>

            
            <a-form-item v-bind="formItemLayout" label="其他材料" :help="`行业经营许可证等，支持图片格式JPG、PNG，且每个文件大小不超过${imageSize}M`">
                <div class="clearfix">
                    <a-upload v-decorator="['upload12']" name="upfile" :headers="henderstoken" action="/file/file/upload"
                        listType="picture-card" :fileList="fileList12" :data="{to}" @preview="handlePreview12"
                        @change="handleChange12">
                        <div v-if="fileList12.length < 3">
                            <a-icon type="plus" />
                            <div class="ant-upload-text">其他材料</div>
                        </div>
                    </a-upload>
                    <a-modal :visible="previewVisible12" :footer="null" @cancel="handleCancel12">
                        <img alt="example" style="width: 100%" :src="previewImage12">
                    </a-modal>
                </div>
      </a-form-item>-->
      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:10 }">
          <a-button class="submitButton" html-type="submit" type="primary" :loading="loading">下一步</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { mapState, mapMutations, mapAction } from "vuex";
import api from "@/common/api";
import moment from "moment";
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  data() {
    return {
      henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      to:"",
      dateFormat: "YYYY-MM-DD",
      loading: false,
      isenter: true,
      modify: "",
      form: this.$form.createForm(this),
      previewVisible2: false,
      previewVisible3: false,
      previewVisible5: false,
      previewVisible6: false,
      previewVisible7: false,
      previewVisible8: false,
      previewVisible10: false,
      previewVisible12: false,
      previewVisible15: false,
      previewImage2: "",
      previewImage3: "",
      previewImage5: "",
      previewImage6: "",
      previewImage7: "",
      previewImage8: "",
      previewImage10: "",
      previewImage12: "",
      previewImage15: "",
      fileList2: [],
      fileList3: [],
      fileList5: [],
      fileList6: [],
      fileList7: [],
      fileList8: [],
      fileList10: [],
      fileList12: [],
      picdata: "",
      picdata2: "",
      picdata3: "",
      picdata4: "",
      picdata5: "",
      picdata6: "",
      imageUrl: "",
      imageUrl2: "",

      uploadImg: {
        logBankCard: {
          id: "",
          isPrivate: Boolean,
          imgCardno: null,
        },
        logMerchantPospUpdateRequest: {
          id: "",
          image: "",
          publicAccount: "",
          doorImg: "",
          deskImg: "",
          officeImg: "",
          entrustRecharImg: "",
          merchantProtocolImg: "",
          otherImgs: [],
        },
        legalLogIdentity: {
          id: "",
          imgHead: "",
          imgEmblem: "",
        },
        authLogIdentity: {
          identityName: "",
          identityNo: "",
          expiryDate: "",
          imgHead: "",
          imgEmblem: "",
          imgExt1: "",
        },
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 9 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 10, offset: 1 },
        },
      },
      queryid: null,
      agentid: null,
      bankCardid: null,
      smallid: null,
      isPrivate: Boolean,
    };
  },
  computed: {
    ...mapState({
      imageSize: (state) => state.imageSize,
    }),
  },
  mounted() {
    console.log(this.$route.params.memberNo);
    console.log(this.$route.params.updata);
    console.log(this.$route.params.queryid);
    this.memberNo = this.$route.params.memberNo;
    this.queryid = this.$route.params.queryid;
    // this.queryid = "1579156577605004";

    this.getExistData();
  },
  methods: {
    moment,
    //日期不可选
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },
    dateChange(date, dateString) {
      console.log("dateString", dateString);
      this.uploadImg.authLogIdentity.expiryDate = dateString;
    },
    getExistData() {
      this.$axios.get("/agent/logAgent/fetch/" + this.queryid).then(
        (res) => {
          console.log("res", res);
          if (res.data.code == "OK") {
            localStorage.setItem("queryid", this.queryid);
            this.modify = res.data.data;
            this.to = this.modify.agent.memberNo + "_" + this.modify.agent.merchantName
            this.merchantType = this.modify.agent.merchantType;
            this.memberNo = this.modify.agent.memberNo;

            this.agentid = Number(this.modify.agent.id);
            this.bankCardid = Number(this.modify.bankCard.id);
            this.smallid = Number(this.modify.smallIdentity.id);

            this.uploadImg.logMerchantPospUpdateRequest.handCardImg = this.modify.agent.handCardImg; //手持

            this.uploadImg.legalLogIdentity.imgHead = this.modify.smallIdentity.imgHead; //身份证正
            this.uploadImg.legalLogIdentity.imgEmblem = this.modify.smallIdentity.imgEmblem; //身份证反

            this.uploadImg.logBankCard.imgCardno = this.modify.bankCard.imgCardno; //银行卡正

            this.form.setFieldsValue({
              upload2: this.modify.smallIdentity.imgHead, //身份证
              upload5: this.modify.bankCard.imgCardno, //银行卡
              upload7: this.modify.agent.handCardImg, //手持
            });

            if (this.modify.smallIdentity.imgHead) {
              this.fileList2 = [
                {
                  uid: Math.random(10000),
                  name: "xxx.png",
                  status: "done",
                  url:
                    "/file/file/download/" + this.modify.smallIdentity.imgHead,
                },
              ];
            }
            if (this.modify.smallIdentity.imgEmblem) {
              this.fileList3 = [
                {
                  uid: Math.random(10000),
                  name: "xxx.png",
                  status: "done",
                  url:
                    "/file/file/download/" +
                    this.modify.smallIdentity.imgEmblem,
                },
              ];
            }
            if (this.modify.bankCard.imgCardno) {
              this.fileList5 = [
                {
                  uid: Math.random(10000),
                  name: "xxx.png",
                  status: "done",
                  url: "/file/file/download/" + this.modify.bankCard.imgCardno,
                },
              ];
            }
            
            if (this.modify.agent.handCardImg) {
              this.fileList7 = [
                {
                  uid: Math.random(10000),
                  name: "xxx.png",
                  status: "done",
                  url: "/file/file/download/" + this.modify.agent.handCardImg,
                },
              ];
            }
          }
        },
        (err) => {}
      );
    },
    handleSubmit(e) {
      console.log("点击了提交");

      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("values", values);
          //协议
          if (this.fileList2.length == 0) {
            console.log("请上传身份证正面照片");
            this.$message.error("请上传身份证正面照片");
            return false;
          }
          if (this.fileList3.length == 0) {
            console.log("请上传身份证反面照片");
            this.$message.error("请上传身份证反面照片");
            return false;
          }

          if (this.fileList5.length == 0) {
            this.$message.error("请上传银行卡正面照片");
            return false;
          }

          if (this.fileList7.length == 0) {
            console.log("请上传申请人手持身份证和银行卡照片");
            this.$message.error("请上传申请人手持身份证和银行卡照片");
            return false;
          }

          let data = {
            agentInfoUpdateRequest: {
              memberNo: this.memberNo,
              merchantType: this.merchantType,
              id: this.agentid,

              handCardImg: this.uploadImg.logMerchantPospUpdateRequest
                .handCardImg, //手持
            },
            smallLogIdentity: {
              id: this.smallid,
              imgHead: this.uploadImg.legalLogIdentity.imgHead, //身份证正
              imgEmblem: this.uploadImg.legalLogIdentity.imgEmblem, //身份证反
            },
            logBankCard: {
              id: this.bankCardid,

              imgCardno:
                this.uploadImg.logBankCard.imgCardno != ""
                  ? this.uploadImg.logBankCard.imgCardno
                  : null, //银行卡正
            },
          };
          this.loading = true;
          this.$axios.post("/agent/logAgent/update/image", data).then(
            (res) => {
              console.log("updateimage", res);
              this.loading = false;
              if (res.data.code == "OK") {
                // this.$router.push({
                //     name: "/Partners/step3",
                //     params: {
                //     queryid:  this.queryid,
                //     }
                // });
                this.$router.push(`/Partners/${this.queryid}/step3`);
              } else {
                this.$message.error(res.data.message);
              }
            },
            (err) => {
              this.loading = false;
              console.log(err);
            }
          );
        }
      });
    },
    handleChange2({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList2 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.legalLogIdentity.imgHead = obj.response.data;
          }
        }
      }
    },
    handleChange3({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList3 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.legalLogIdentity.imgEmblem = obj.response.data;
          }
        }
      }
    },

    handleChange5({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      console.log("fileList", fileList);
      this.fileList5 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.logBankCard.imgCardno = obj.response.data;
          }
        }
      }
    },
    handleChange6({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList6 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.logBankCard.imgTrack = obj.response.data;
          }
        }
      }
    },
    handleChange7({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList7 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.logMerchantPospUpdateRequest.handCardImg =
              obj.response.data;
          }
        }
      }
    },
    handleChange8({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList8 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.logMerchantPospUpdateRequest.deskImg =
              obj.response.data;
          }
        }
      }
    },
    handleChange10({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList10 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.logMerchantPospUpdateRequest.merchantProtocolImg.push(
              obj.response.data
            );
          }
        }
      }
    },
    handleChange12({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList12 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.logMerchantPospUpdateRequest.otherImgs.push(
              obj.response.data
            );
          }
        }
      }
    },
    handleChange14({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList14 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.authLogIdentity.imgEmblem = obj.response.data;
          } else {
            this.uploadImg.authLogIdentity.imgEmblem = "";
          }
        }
      }
    },
    beforeUpload(file) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpg、 png 2种格式！");
        return;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
      }
      return isLt2M;
    },

    handleCancel2() {
      this.previewVisible2 = false;
    },
    handleCancel3() {
      this.previewVisible3 = false;
    },
    handleCancel5() {
      this.previewVisible5 = false;
    },
    handleCancel6() {
      this.previewVisible6 = false;
    },
    handleCancel7() {
      this.previewVisible7 = false;
    },
    handleCancel8() {
      this.previewVisible8 = false;
    },
    handleCancel10() {
      this.previewVisible10 = false;
    },

    handleCancel12() {
      this.previewVisible12 = false;
    },
    handleCancel15() {
      this.previewVisible15 = false;
    },
    handlePreview2(file) {
      this.previewImage2 = file.url || file.thumbUrl;
      this.previewVisible2 = true;
    },
    handlePreview3(file) {
      this.previewImage3 = file.url || file.thumbUrl;
      this.previewVisible3 = true;
    },
    handlePreview5(file) {
      this.previewImage5 = file.url || file.thumbUrl;
      this.previewVisible5 = true;
    },
    handlePreview6(file) {
      this.previewImage6 = file.url || file.thumbUrl;
      this.previewVisible6 = true;
    },
    handlePreview7(file) {
      this.previewImage7 = file.url || file.thumbUrl;
      this.previewVisible7 = true;
    },
    handlePreview8(file) {
      this.previewImage8 = file.url || file.thumbUrl;
      this.previewVisible8 = true;
    },
    handlePreview10(file) {
      this.previewImage10 = file.url || file.thumbUrl;
      this.previewVisible10 = true;
    },

    handlePreview12(file) {
      this.previewImage12 = file.url || file.thumbUrl;
      this.previewVisible12 = true;
    },

    handlePreview15(file) {
      this.previewImage15 = file.url || file.thumbUrl;
      this.previewVisible15 = true;
    },
    handleCancel2() {
      this.previewVisible2 = false;
    },
    handleCancel3() {
      this.previewVisible3 = false;
    },
    handleCancel5() {
      this.previewVisible5 = false;
    },
    handleCancel6() {
      this.previewVisible6 = false;
    },
    handleCancel7() {
      this.previewVisible7 = false;
    },
    handleCancel8() {
      this.previewVisible8 = false;
    },
    handleCancel10() {
      this.previewVisible10 = false;
    },

    handleCancel12() {
      this.previewVisible12 = false;
    },
    handleCancel15() {
      this.previewVisible15 = false;
    },
    validateIdentityNo(rule, value, callback) {
      const form = this.form;
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback("您输入的身份证号码格式有误！");
      } else {
        console.log("身份证号码！", value);
      }
      callback();
    },
    getDownload() {
      console.log("下载");
    },
  },
};
</script>

<style scoped>
.avatar-uploader {
  float: left;
}

.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.c-center {
  text-align: center;
}

.submitButton {
  width: 8vw;
}

.formGroupTitle {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
}

.row-sty {
  margin-bottom: 20px;
  margin-top: 20px;
}
</style>